<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/layout/layout.xhtml">

	<ui:define name="content">
		<h:form id="form">
			<p:growl id="growl" showDetail="true"
				style="text-align: center; width:995px" />
		    
		    <p:panel style="text-align: center;">
				<h:selectOneMenu id="saison" value="#{listeProduitControler.selectedSaison}">
					<f:selectItems value="#{listeSaisonControler.saisons}"
						var="saison" itemValue="#{saison}" itemLabel="#{saison.label}" />
					<f:converter converterId="saisonConverter" />
					<f:ajax event="valueChange" render="form" />
				</h:selectOneMenu>
			</p:panel>
			
			<p:dataTable id="tableProduits" var="produit"
				value="#{listeProduitControler.produits}" paginator="true"
				rows="50" rowsPerPageTemplate="20,50,100,200,500" rowKey="#{produit.id}"
				selection="#{listeProduitControler.selectedProduit}"
				selectionMode="single"
				style="margin-left:0.5em;width:99%">
				
 				<p:ajax event="rowSelect" update=":form:detail" oncomplete="detailProduitDialog.show()" />
                    
				<f:facet name="header">  
            		Liste des produits (#{fn:length(listeProduitControler.produits)} produits)
            		<ui:include src="/pages/hidden/hiddenTableProduits.xhtml" />
            		
            		<h:commandLink immediate="true">
						<p:graphicImage value="/images/charlott/excel.png" />
						<p:dataExporter type="xls" target="hiddenTableProduits"
							fileName="charlottweb_produits_xls" />
					</h:commandLink>

            		<h:commandLink immediate="true">
						<p:graphicImage value="/images/charlott/csv.png" />
						<p:dataExporter type="csv" target="hiddenTableProduits"
							fileName="charlottweb_produits_csv" />
					</h:commandLink>
				</f:facet>

				<p:column filterBy="#{produit.nom}" sortBy="#{produit.nom}">
					<f:facet name="header">
						<h:outputText value="Nom" />
					</f:facet>
					<h:outputText value="#{produit.nom}" />
				</p:column>
				
				<p:column filterBy="#{produit.reference}" sortBy="#{produit.reference}">
					<f:facet name="header">
						<h:outputText value="Reference" />
					</f:facet>
					<h:outputText value="#{produit.reference}" />
				</p:column>
				
				<p:column filterBy="#{produit.categorie.nom}" sortBy="#{produit.categorie.nom}">
					<f:facet name="header">
						<h:outputText value="Categorie" />
					</f:facet>
					<h:outputText value="#{produit.categorie.nom}" />
				</p:column>

				<p:column filterBy="#{produit.prix}" sortBy="#{produit.prix}">
					<f:facet name="header">
						<h:outputText value="Prix" />
					</f:facet>
					<h:outputText value="#{produit.prix} &#8364;" />
				</p:column>
				
				<p:column filterBy="#{produit.collection.nom}" sortBy="#{produit.collection.nom}">
					<f:facet name="header">
						<h:outputText value="Collection" />
					</f:facet>
					<h:outputText value="#{produit.collection.nom} " />
				</p:column>
				
			</p:dataTable>

			<ui:include src="/pages/produit/detailsProduitDialog.xhtml">
				<ui:param name="produit"
					value="#{listeProduitControler.selectedProduit}" />
				<ui:param name="backBean"
					value="#{listeProduitControler}" />
			</ui:include>

		</h:form>
	</ui:define>

</ui:composition>